<template>
	<view style="height: 400rpx">
		<l-echart ref="chart"></l-echart>
	</view>
</template>

<script>
	import * as echarts from 'echarts';
	export default {
		data() {
			return {
				data: [{
						value: 777,
						name: '中共党员'
					},
					{
						value: 777,
						name: '民主党派成员'
					},
					{
						value: 777,
						name: '群众'
					}, 
					{
						value: 777,
						name: '无党派人士'
					}
				]
			}
		},
		mounted() {
			let _this = this
			this.$refs.chart.init(echarts, chart => {
				let option = {
					legend: {
						orient: 'vertical',
						right: 'right',
						top: 'center',
						icon: 'square',
						formatter: function(name) {
							// 找到对应的项并返回格式化的字符串
							const item = _this.data.find(d => d.name === name);
							return `${name}  ${item ? item.value : 0}人`;
						}
					},
					tooltip: {
						trigger: 'item'
					},
					series: [{ 
						type: 'pie',
						radius: ['40%', '70%'],
						center: ['30%', '50%'],
						avoidLabelOverlap: false,
						label: {
							show: false,
							position: 'center'
						},
						emphasis: {
							label: {
								show: true,
								fontSize: '40',
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: false
						},
						data: _this.data
					}],
						color:['#4064FF','#78D3F8','#61DDAA','#EBAF78']
				}
				chart.setOption(option);
			});
		}
	}
</script>